<script>
import * as weapon from '../../utils/weapon.js'
import "animate.css"
import '../../less/csFilter.less'
export default {
	name:'cs-filter',
	data () {
		return {
			usedFilter:[],
			date:"",
			filterForm:{},
			filterAnimateType:false,
			filtersIsShow:true,
			_usedFilterIsShow:false,
			emitAvailable:false
		}
	},
	props:{
		filters:{
			type:Array,
			default:[]
		},
		filterAction:{
			type:null,
			default:""
		},
		sessionStorageFilterKey:{
			type:String
		}
	},
	watch:{
		'filterList':{
			handler(newData){
				console.log("filterList change @@@")
				var filter={}
				newData.forEach((item,index)=>{
					if(item.value){
						filter[item.field]=item.value
					}
				})
				this.paramsFilter=filter
				if(this.emitAvailable){
					this.$emit("do-filter",this.paramsFilter);
					this.emitAvailable=false;
				}
			},
			deep:true
		}		
	},
	computed:{
		filterList(){
			return this.filters
		}
	},
	created(){
		
	},
	beforeMount(){
		var usedFilter;
		if( usedFilter= sessionStorage.getItem(this.sessionStorageFilterKey)){
			this.usedFilter=JSON.parse(usedFilter)
		}
		for(let index in this.usedFilter){
			this.$set(this.filterForm,this.usedFilter[index].prop,this.usedFilter[index].value);
		}
	},
	methods:{
		handleFilter(){
			console.log("paramsFilter &&:",this.paramsFilter)
			this.$emit("do-filter",this.paramsFilter);
			this._usedFilterIsShow=true;
			this.usedFilter=[];
			this.filterList.forEach((item,index)=>{
				if(this.filterForm[item.prop]!=""){
					this.usedFilter.push(item);
				}
				this.filterForm[item.prop]=item.value;
			});
			sessionStorage.setItem(this.sessionStorageFilterKey,JSON.stringify(this.usedFilter));
			this.handleHidefilters();
			this.emitAvailable=true;
		},
		handleReset(){
			for(let prop in this.filterForm){
				this.filterForm[prop]="";
			}
			this.usedFilterIsShow=false;
			this.filterList.forEach((item,index)=>{
				item.value="";
			});
			sessionStorage.setItem(this.sessionStorageFilterKey,JSON.stringify(this.usedFilter));
			this.$emit("do-filter",this.paramsFilter);
			this.emitAvailable=true;	
		},
		handleInput(index,val){			
			this.$set(this.filterList[index],'value',val)
			//this.filterList[index].value=val
		},
		listToggleShow(){
			this.filterAnimateType=this.filterAnimateType? false : true;
			this.filtersIsShow=true;
		},
		handleHidefilters(){
			this.filterAnimateType=false;
		},
		animationEnd1(){
			this.filtersIsShow=this.filterAnimateType;
		},
		handelFilterDel(index){
			this.emitAvailable=true;
			this.$set(this.filterList[index],'value',"")
		}
	},
	render(h){
		var _this=this;		
		console.log("this.filterList&&^^",this.filterList)
		return(
			<div class="cs-filter">
				<div class="filters-selected">
					<h5>筛选条件:</h5>
					<div class="list-wrap">
						{weapon.arrayEach(_this.filterList,(item,index)=>{
							if(item.value && this._usedFilterIsShow){
								return(
								<dl>
									<dt>{item.label}：</dt>
									<dd>{item.value}</dd>
									<dd class="btn-del fa fa-close" data-filter={JSON.stringify(item)} on-click={this.handelFilterDel.bind(this,index)}></dd>
								</dl>
								)
							}else{

							}
						})}
					</div>
				</div>
				<div v-show={this.filtersIsShow}
					on-animationend={this.animationEnd1}
					class={["filter-list",this.filterAnimateType ? "animated duration_0_3s rotateInDownRight" : "rotateOutUpRight animated duration_0_3s"]}>
					<el-form label-position="top" ref="filterForm">
						{weapon.arrayEach(_this.filterList,(item,index)=>{
							switch(item.type){
								case "input":
									return(
										<el-form-item label={item.label} >
											<el-input
												name={item.field}
												value={item.value}
												on-input={_this.handleInput.bind(this,index)}></el-input>
										</el-form-item>
									)
									break;
								case "select":
									return(
										<el-form-item label={item.label} >
											<el-select
												on-change={_this.handleInput.bind(this,index)}
												name={item.field}
												value={item.value}
												v-model="this.date"
												placeholder="请选择">
												{item.options ? weapon.arrayEach(item.options,(opt,index)=>{
													return(
														<el-option
															label={opt.label}
															value={opt.value}>
													    </el-option>
													)
												}):''}
											</el-select>
										</el-form-item>
									)
									break;
								case "DatePicker":
									return(
										<el-form-item>
											<label class="el-form-item__label">
											    {item.label}
											</label>
											 <el-date-picker
												type="date"
												on-input={_this.handleInput.bind(this,item.field)}
												value={item.value}
												placeholder="选择日期">
											 </el-date-picker>
										</el-form-item>
									)
									break;
								default:
									break;
							}
						})}
						<el-form-item>
							<el-button type="primary" on-click={this.handleFilter}>筛选</el-button>
							<el-button on-click={this.handleReset}>重置</el-button>
							<el-button on-click={this.handleHidefilters}>关闭</el-button>
						</el-form-item>
					</el-form>
				</div>			
				<el-button class="open-fold" on-click={this.listToggleShow}><span>筛选</span><s class="icon fa fa-bars"></s></el-button>
			</div>
		)
	}
}
</script>

<style>
</style>
